<template>
  <div class="home">
    <Header />
    
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <h1 class="hero-title">
              高性能网络穿透和代理工具
            </h1>
            <p class="hero-subtitle">
              基于 Spring Boot 3.5.0 和 JDK 24 开发，支持 TCP、HTTP、SOCKS 协议，
              提供完整的内网穿透、网络代理、流量监控等功能。
            </p>
            <div class="hero-actions">
              <router-link to="/download" class="btn btn-primary btn-large">
                <el-icon><Download /></el-icon>
                立即下载
              </router-link>
              <router-link to="/docs" class="btn btn-outline btn-large">
                <el-icon><Document /></el-icon>
                查看文档
              </router-link>
            </div>
            <div class="hero-stats">
              <div class="stat-item">
                <div class="stat-number">1.3.3</div>
                <div class="stat-label">当前版本</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">JDK 24</div>
                <div class="stat-label">技术栈</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">10K+</div>
                <div class="stat-label">并发连接</div>
              </div>
            </div>
          </div>
          <div class="hero-visual">
            <div class="network-diagram">
              <div class="client-node">
                <el-icon><Monitor /></el-icon>
                <span>客户端</span>
              </div>
              <div class="connection-line"></div>
              <div class="server-node">
                <el-icon><Server /></el-icon>
                <span>服务端</span>
              </div>
              <div class="connection-line"></div>
              <div class="internet-node">
                <el-icon><Globe /></el-icon>
                <span>公网</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">核心功能</h2>
          <p class="section-subtitle">提供完整的内网穿透和网络代理解决方案</p>
        </div>
        
        <div class="features-grid">
          <div class="feature-card card card-hover">
            <div class="feature-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <h3 class="feature-title">内网穿透</h3>
            <p class="feature-description">
              支持多种穿透模式，将内网服务安全地暴露到公网，实现远程访问和调试。
            </p>
            <ul class="feature-list">
              <li>服务端渗透客户端</li>
              <li>客户端渗透服务端</li>
              <li>客户端渗透客户端</li>
              <li>支持 TCP/HTTP 协议</li>
            </ul>
          </div>
          
          <div class="feature-card card card-hover">
            <div class="feature-icon">
              <el-icon><Share /></el-icon>
            </div>
            <h3 class="feature-title">网络代理</h3>
            <p class="feature-description">
              提供 HTTP 和 SOCKS 代理服务，支持异地组网和网络加速。
            </p>
            <ul class="feature-list">
              <li>HTTP/HTTPS 代理</li>
              <li>SOCKS4/SOCKS5 代理</li>
              <li>代理认证支持</li>
              <li>流量加密传输</li>
            </ul>
          </div>
          
          <div class="feature-card card card-hover">
            <div class="feature-icon">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <h3 class="feature-title">流量监控</h3>
            <p class="feature-description">
              实时监控网络流量使用情况，提供详细的统计报表和分析。
            </p>
            <ul class="feature-list">
              <li>实时流量统计</li>
              <li>客户端流量排行</li>
              <li>端口使用分析</li>
              <li>流量趋势图表</li>
            </ul>
          </div>
          
          <div class="feature-card card card-hover">
            <div class="feature-icon">
              <el-icon><Setting /></el-icon>
            </div>
            <h3 class="feature-title">路由管理</h3>
            <p class="feature-description">
              支持虚拟路由和流量转发，实现灵活的网络配置。
            </p>
            <ul class="feature-list">
              <li>虚拟 IP 路由</li>
              <li>流量转发规则</li>
              <li>智能路由选择</li>
              <li>负载均衡支持</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Technology Section -->
    <section class="technology">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">技术架构</h2>
          <p class="section-subtitle">基于现代化的技术栈，提供高性能和可靠性</p>
        </div>
        
        <div class="tech-grid">
          <div class="tech-item">
            <div class="tech-icon">
              <el-icon><Monitor /></el-icon>
            </div>
            <h4>Spring Boot 3.5.0</h4>
            <p>现代化的应用框架，提供快速开发和部署能力</p>
          </div>
          
          <div class="tech-item">
            <div class="tech-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <h4>Netty</h4>
            <p>高性能异步网络框架，支持高并发连接处理</p>
          </div>
          
          <div class="tech-item">
            <div class="tech-icon">
              <el-icon><DataBase /></el-icon>
            </div>
            <h4>Lazy ORM</h4>
            <p>轻量级 ORM 框架，提供类型安全的数据库操作</p>
          </div>
          
          <div class="tech-item">
            <div class="tech-icon">
              <el-icon><Cpu /></el-icon>
            </div>
            <h4>JDK 24</h4>
            <p>最新的 Java 开发工具包，提供优秀的性能表现</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Quick Start Section -->
    <section class="quick-start">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">快速开始</h2>
          <p class="section-subtitle">几分钟内完成部署和配置</p>
        </div>
        
        <div class="start-steps">
          <div class="step-item">
            <div class="step-number">1</div>
            <div class="step-content">
              <h4>启动服务端</h4>
              <div class="code-block">
                <pre><code class="language-bash">docker run -d -it -p 6001:6001 -p 7001:7001 -p 8001:8001 -p 9001:9001 \
  --name wlcn-server \
  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-server:1.3.4-JDK24-SNAPSHOT</code></pre>
              </div>
            </div>
          </div>
          
          <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-content">
              <h4>启动客户端</h4>
              <div class="code-block">
                <pre><code class="language-bash">docker run -d -it --privileged -p 6004:6004 \
  --name wlcn-client \
  --restart=always \
  -e spring.lazy.netty.client.inet-host=YOUR_SERVER_IP \
  -e spring.lazy.netty.client.inet-port=7001 \
  -e spring.lazy.netty.client.client-id="your-client-id" \
  registry.cn-hangzhou.aliyuncs.com/wu-lazy/wu-lazy-cloud-heartbeat-client-start:1.3.4-JDK24-SNAPSHOT</code></pre>
              </div>
            </div>
          </div>
          
          <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-content">
              <h4>访问管理界面</h4>
              <div class="code-block">
                <pre><code class="language-bash"># 服务端管理界面
http://127.0.0.1:6001/netty-server-ui/index.html

# 客户端管理界面
http://127.0.0.1:6004/netty-client-local-ui/index.html</code></pre>
              </div>
            </div>
          </div>
        </div>
        
        <div class="start-actions">
          <router-link to="/docs" class="btn btn-primary btn-large">
            <el-icon><Document /></el-icon>
            查看详细文档
          </router-link>
          <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline btn-large">
            <el-icon><Platform /></el-icon>
            访问 GitHub
          </a>
        </div>
      </div>
    </section>

    <!-- CTA Section -->
    <section class="cta">
      <div class="container">
        <div class="cta-content">
          <h2 class="cta-title">开始使用 Wu-Lazy-Cloud-Network</h2>
          <p class="cta-subtitle">
            加入数千名开发者，体验高性能的网络穿透和代理服务
          </p>
          <div class="cta-actions">
            <router-link to="/download" class="btn btn-primary btn-large">
              <el-icon><Download /></el-icon>
              立即下载
            </router-link>
            <router-link to="/docs" class="btn btn-outline btn-large">
              <el-icon><Document /></el-icon>
              查看文档
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { 
  Download, 
  Document, 
  Connection, 
  Share, 
  DataAnalysis, 
  Setting,
  Monitor,
  // Server,
  // Globe,
  // DataBase,
  Cpu,
  Platform
} from '@element-plus/icons-vue'

onMounted(() => {
  // 高亮代码块
  if (window.Prism) {
    window.Prism.highlightAll()
  }
})
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
}

// Hero Section
.hero {
  padding: 120px 0 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  
  .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
  
  .hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    
    @media (max-width: 768px) {
      font-size: 32px;
    }
  }
  
  .hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
    opacity: 0.9;
  }
  
  .hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  
  .hero-stats {
    display: flex;
    gap: 40px;
    
    @media (max-width: 768px) {
      gap: 20px;
    }
    
    .stat-item {
      text-align: center;
      
      .stat-number {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        opacity: 0.8;
      }
    }
  }
  
  .hero-visual {
    .network-diagram {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      
      .client-node,
      .server-node,
      .internet-node {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        
        .el-icon {
          font-size: 32px;
        }
        
        span {
          font-size: 14px;
          font-weight: 500;
        }
      }
      
      .connection-line {
        width: 40px;
        height: 2px;
        background: rgba(255, 255, 255, 0.3);
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: -3px;
          width: 0;
          height: 0;
          border-left: 6px solid rgba(255, 255, 255, 0.3);
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
        }
      }
    }
  }
}

// Features Section
.features {
  padding: 80px 0;
  background: var(--background-color);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  
  .section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .section-subtitle {
    font-size: 18px;
    color: var(--text-regular);
    max-width: 600px;
    margin: 0 auto;
  }
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.feature-card {
  .feature-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    
    .el-icon {
      font-size: 28px;
      color: white;
    }
  }
  
  .feature-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  .feature-description {
    color: var(--text-regular);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  
  .feature-list {
    list-style: none;
    
    li {
      color: var(--text-regular);
      margin-bottom: 6px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
}

// Technology Section
.technology {
  padding: 80px 0;
  background: var(--background-light);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.tech-item {
  text-align: center;
  padding: 30px;
  
  .tech-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-light);
    
    .el-icon {
      font-size: 36px;
      color: var(--primary-color);
    }
  }
  
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  p {
    color: var(--text-regular);
    line-height: 1.6;
  }
}

// Quick Start Section
.quick-start {
  padding: 80px 0;
  background: var(--background-color);
}

.start-steps {
  max-width: 800px;
  margin: 0 auto 40px;
}

.step-item {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  
  .step-number {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
  }
  
  .step-content {
    flex: 1;
    
    h4 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }
  }
}

.start-actions {
  text-align: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  
  @media (max-width: 768px) {
    flex-direction: column;
    align-items: center;
  }
}

// CTA Section
.cta {
  padding: 80px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  
  .cta-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .cta-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
    }
  }
}
</style> 